<template>
  <a-form-model-item :label="label" :prop="prop" :labelCol="labelCol" :wrapperCol="wrapperCol">
    <a-select
      class="readonlySelect"
      v-if="readonly"
      v-model="value"
      disabled
      :placeholder="placeholder"
      :maxTagCount="maxTagCount"
      style="width: 100%; background-color: #fff; color: rgba(0, 0, 0, 0.65); cursor: auto"
    >
      <a-select-option :value="item[replaceFields.value]" v-for="(item, index) in optList" :key="index">{{
        item[replaceFields.label]
      }}</a-select-option>
    </a-select>

    <a-select
      v-else
      v-model="value"
      :mode="multiple"
      style="width: 100%"
      :disabled="disabled"
      :placeholder="placeholder"
      :maxTagCount="maxTagCount"
      :maxTagTextLength="maxTagTextLength"
      :loading="loading"
      :isCharge="isCharge"
      @change="handleChange"
    >
      <a-select-option :value="item[replaceFields.value]" v-for="(item, index) in optList" :key="index">{{
        item[replaceFields.label]
      }}</a-select-option>
    </a-select>
  </a-form-model-item>
</template>

<script>
export default {
  name: 'ResealSelect',
  props: {
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // label格数
    labelCol: {
      type: Object,
      default: () => {
        return null;
      },
    },
    // input格数
    wrapperCol: {
      type: Object,
      default: () => {
        return null;
      },
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute',
    },
    // 选择字典
    optList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 映射children，title,value,key字段
    replaceFields: {
      type: Object,
      default: () => {
        return {
          label: 'name',
          value: 'code',
        };
      },
    },
    // 文字
    label: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    // 多选模式
    multiple: {
      type: String,
      default: '',
    },
    maxTagCount: {
      type: Number,
      default: 100,
    },
    maxTagTextLength: {
      type: Number,
      default: 10,
    },
    // 可输入搜索 未开发
    // search: {
    //   type: Boolean,
    //   default: true
    // },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false,
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    // 是否是充电用户导入
    isCharge: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    parentData: function () {
      const arr = this.prop.split('.');
      const key = arr[arr.length - 1];
      return this.analysisAttribute(this.form)[key];
    },
  },
  watch: {
    parentData: {
      handler: function (n) {
        this.value = n;
      },
      immediate: true,
    },
  },
  data() {
    return {
      value: '',
    };
  },
  methods: {
    handleChange(e) {      
      if (this.isCharge) {
        // 充电用户角色 不允许删除
        e.includes('2') ? e : e.push('2');
      }
      
      this.$emit('change', e);
      this.analysisAttribute(this.form, e);
    },
    /**
     * [analysisAttribute 根据字符串获取末级对象]
     * @param  {[type]} object [读取的对象]
     * @param  {[type]} val    [末级对象的具体属性赋值val（空值输出末级对象）]
     * @return {[type]}        [description]
     */
    analysisAttribute(object, val) {
      var arr = this.prop.split('.');
      let index = 0;
      const length = arr.length;
      while (object != null && index < length - 1) {
        object = object[arr[index]];
        index++;
      }
      if (val || val === 0) {
        object[arr[index++]] = val;
      } else {
        return object;
      }
    },
  },
};
</script>
<style>
.ant-select-dropdown-content {
  max-height: 300px;
  overflow-y: auto;
}
.readonlySelect .ant-select-selection {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.65);
  cursor: auto;
}
</style>
